<template>
    <div style="width: 100%; height: 600px">
        <div class="left">
            <div class="show">
                <i class="el-icon-s-tools"></i> 问卷设置
            </div>
            <ul >
                <li>问卷显示问题编号 
                    <el-switch v-model="this.currentQuestionnaire.is_order" @change="handleIsOrder"></el-switch>
                </li>
                <li>答题需要登录验证
                    <el-switch v-model="this.currentQuestionnaire.need_confirmed" @change="handleConfirmNeed"></el-switch>
                </li>
                <li>每个用户只能回答一次
                    <el-switch v-model="this.currentQuestionnaire.only_answer" @change="handleOnlyAnswer"></el-switch>
                </li>
                <li>设定问卷结束时间
                    <el-switch v-model="value4"></el-switch>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
/* eslint-disable no-unused-vars */
import {GetAllQuestionInfoWithoutUid, setIfOnlyAnswer, setConfirmNeed, questionnaireSetIsOrder} from '../../api';
export default {
    data(){
        return{
            currentQuestionnaire: {},
            value4: true
        }
    },
    props:['questionnaire'],
    mounted() {
        this.currentQuestionnaire = this.$parent.questionnaire;
        this.initData();
    },
    methods: {
        async initData() {
            console.log(this.currentQuestionnaire)
            await GetAllQuestionInfoWithoutUid(this.currentQuestionnaire.id).then(res => {
                this.currentQuestionnaire.only_answer = res.only_answer;
                this.currentQuestionnaire.need_confirmed = res.need_confirmed;
                this.currentQuestionnaire.is_order = res.is_order;
                this.currentQuestionnaire.deadline = res.deadline;
            })
            console.log(this.currentQuestionnaire);
            this.$forceUpdate();    //实在没办法了，暴力解决
        },
        async handleOnlyAnswer() {
            console.log(this.currentQuestionnaire.only_answer);
            if (this.currentQuestionnaire.only_answer) {
                await setIfOnlyAnswer(this.currentQuestionnaire.id, 'false').then(res => {
                    this.currentQuestionnaire.only_answer = false;
                })
            } else {
                await setIfOnlyAnswer(this.currentQuestionnaire.id, 'true').then(res => {
                    this.currentQuestionnaire.only_answer = true;
                })
            }
            console.log(this.currentQuestionnaire.only_answer);
            this.$forceUpdate();
        },
        async handleConfirmNeed() {
            console.log(this.currentQuestionnaire.need_confirmed)
            if (this.currentQuestionnaire.need_confirmed) {
                await setConfirmNeed(this.currentQuestionnaire.id, 'false').then(res => {
                    this.currentQuestionnaire.need_confirmed = false;
                })
            } else {
                await setConfirmNeed(this.currentQuestionnaire.id, 'true').then(res => {
                    this.currentQuestionnaire.need_confirmed = true;
                })
            }
            this.$forceUpdate();
        },
        async handleIsOrder() {
            if (this.currentQuestionnaire.is_order) {
                await questionnaireSetIsOrder(this.$store.state.uid, this.currentQuestionnaire.id, 'false').then(res => {
                    this.currentQuestionnaire.is_order = false;
                })
            } else {
                await questionnaireSetIsOrder(this.$store.state.uid, this.currentQuestionnaire.id, 'true').then(res => {
                    this.currentQuestionnaire.is_order = true;
                })
            }
            this.$forceUpdate();
        }
    },
    watch:{
        questionnaire() {
            this.currentQuestionnaire = this.questionnaire;
            this.initData();
        }
    }
}

</script>
<style scoped>
.left{
    text-align: left;
    padding-top: 30px;
    padding-left: 30px;
}
.right{
    height: 100%;
    border: solid 1px rgb(209, 208, 208);
}
.show{
    margin-top:25px;
    margin-left: 60px;
    font-size: larger;
    font-weight: bold;
}
.re-set{
    margin-top:25px;
    font-size: larger;
    font-weight: bold;
    text-align: center;
}
.left ul{
    margin-left:65px;
    margin-top:45px;
}
.left li{
    margin-top:20px ;
}
.left .el-switch{
    position: absolute;
    right:55%;
}
.right ul{
    margin-left:65px;
    margin-top:45px;
}
.right li{
    margin-top:20px ;
}
.right .el-switch{
    position: absolute;
    right:25%;
}
</style>